<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>

            #box {
                position: absolute;
                animation: move 2s linear infinite;
            }


            @keyframes move {
                from {
                    left: 0;
                }
                to {
                    left: 100vw;
                }

            }

        </style>
    </head>
    <body>

        <!--
            jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1]
        -->

        <div id="#box"></div>

        <ul>
            <li class="red"></li>
            <li></li>
            <li class="red"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <div class="black">111</div>
        <div></div>
        <p>hehe</p>
        <a href="http://localhost:63342/jQuery/jq_selector01.html?#test">haha</a>
        <p id="test">hehe waige</p>

        <h6>234908</h6>

    <div class=".blue">1</div>
    <div>
        2
        <p class="apple">1</p>
    </div>


    </body>
</html>
<script src="lib/jquery.min.js"></script>
<!--<script src="lib/jquery.js"></script>-->
<script>

    // 返回jQuery对象
    console.log($('#box'));
    // 设置样式, 可以进行链式操作
    $('#box').css("width", "200px").css("height", "200px").css("background", "red");

//    console.log($('li'));
//    $('li').css("width", "300px").css("height", "35px").css("border", "2px solid black");
//
//    $('.red').css("background", "red");

    /*
    var obj = {
        name: "张珊",
        run: function () {
            console.log("我会跑");
            return this;
        },
        sing: function () {
            console.log("我会唱歌");
            return this;
        }
    };
    obj.run().sing().run().run().sing();
    */

//    $("#box>*");

//    $('#box, ul, li').css("boxShadow", "inset 10px 10px 100px 2px black");

//    $('.black+p').css("color", "red");

//    $('.black~p').css("color", "red");

//    $("li:first").css("width", "600px");
//    $('li:not(.red)').css("background", "blue");

//    $('li:even').css("width", "800px");
//    $('li:odd').css("width", "100px");

    // 匹配一个给定索引值的元素
//    $('li:eq(3)').css("background", "yellow");

    // 选中索引大于1的元素
//    $('li:gt(1)').css("background", "yellow");


//    $('li:lt(3)').css("background", "yellow")

//    $('li:gt(3):lt(2)').css("background", "yellow");

//    $(":header").css("color", "pink");

//    $(':animated').css("border", "10px solid yellow");
//    $(document).click(function () {
//        $('#box').animate({left: "+=100"}, 10000);
//        $(':animated').css("border", "10px solid yellow");
//    });

//    $('p:target').css("background", "blue");

    $('a').click(function () {
//        console.log($(':target'));
        // a标签中href必须是完整的链接
        $(':target').css("background", "blue");
    });

//    $("p:contains(waige)").css("color", "red");

//    $('div:has(.apple)').css("background", "orange");

//    console.log($('p:parent')
//        .css('width', "200px")
//        .css("height", "200px")
//        .css("background", "cyan"));
    // 只支持3.0+
    console.log($.escapeSelector('.blue'));
    // $('div.' + $.escapeSelector('.blue')).css("background", "blue");

</script>
